<template>
	<view class="user-info-box">
		<view class="top-box">
			<image :src="userInfo.avatarUrl" mode="widthFix"></image>
			<text>{{this.userInfo.nickName}}</text>
		</view>
		<view class="middle-box">
			<text>我的订单</text>
			<view class="plane-list">
				<view class="plane">
					<image src="/static/my-icons/icon1.png"></image>
					<view>待付款</view>
				</view>
				<view class="plane">
					<image src="/static/my-icons/icon2.png"></image>
					<view>待收货</view>
				</view>
				<view class="plane">
					<image src="/static/my-icons/icon3.png"></image>
					<view>退款</view>
				</view>
				<view class="plane">
					<image src="/static/my-icons/icon4.png"></image>
					<view>全部订单</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="plane-item" @click="chooseAddress">
				<view>收货地址</view>
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="plane-item" @click="logout">
				<view>退出登录</view>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				
			}
		},
		computed:{
			...mapState('user',['userInfo'])
		},
		methods:{
			...mapMutations('user',['updateAddress','updateUserInfo','updateToken']),
			async chooseAddress(){
				const res = await uni.chooseAddress()
				if(res.errMsg=='chooseAddress:ok'){
					this.updateAddress(res)
					uni.$showMsg('修改成功')
				}
			},
			async logout(){
				const res = await uni.showModal({
					title:'提示',
					content:'确定退出登录吗？'
				}).catch(err=>err)
				if(res.errMsg=='showModal:ok'){
					if(res.confirm){
						this.updateAddress({})
						this.updateToken('')
						this.updateUserInfo({})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.user-info-box{
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		align-items: center;
		.top-box{
			display: flex;
			background-color: #008000;
			height: 40%;
			width: 100%;
			flex-direction: column;
			align-items: center;
			
			image{
				margin-top: 50px;
				width: 30%;
				margin-bottom: 10px;
				border-radius: 50%;
			}
			text{
				font-size: 15px;
				color: white;
				margin-bottom: 10px;
				margin-bottom: 20px;
			}
			
		}
		.middle-box{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			background-color: white;
			position: relative;
			width: 90%;
			top: -10px;
			margin: 5px;
			border-radius: 10%;
			text{
				margin-top: 10px;
				margin-left: 10px;
				margin-bottom: 10px;
				font-size: 14px;
			}
			.plane-list{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-around;
				.plane{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						height: 100rpx;
						width: 100rpx;
					}
					padding: 10px;
					font-size: 12px;
				}
			}
		}
		.bottom-box{
			background-color: white;
			width: 90%;
			.plane-item{
				display: flex;
				justify-content: space-between;
				padding: 10px;
				border-bottom: 1px #efefef solid;
			}
		}
	}
</style>